<template>
 <div>
   <template>
    <div class="align-right">
                <el-form :inline="true" :model="listQuery">
                    <div class="pull-right">
                        <el-form-item>
                            <el-input
                                    placeholder="请输入错误编码"
                                    clearable
                                    v-model="listQuery.code">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                           <el-input
                                    placeholder="请输入错误信息"
                                    clearable
                                    v-model="listQuery.message">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-input
                                    placeholder="请输入请求地址"
                                    clearable
                                    v-model="listQuery.url">
                            </el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="handleSearch" icon="el-icon-search" >搜索</el-button>
                        </el-form-item>
                    </div>
                </el-form>
            </div>
        <el-table
        class="mb20"
        ref="LogTable"
        :data="tableDataErrorLog"
        row-key="id"
        border
        highlight-current-row>
        
        <el-table-column align="center" label="序号" min-width ="100" >
            <template slot-scope="scope">
                <span >{{ scope.$index+1 }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="请求地址" min-width="200px" >
            <template slot-scope="scope">
                <span >{{ scope.row.url }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="错误编码" min-width="100px" >
            <template slot-scope="scope">
                <span >{{ scope.row.code }}</span>
            </template>
        </el-table-column>
         <el-table-column align="center" label="错误信息" min-width="300px">
            <template slot-scope="scope">
                <!-- <el-tooltip placement="top" effect="light">
                    <div slot="content"  v-html="scope.row.message">{{scope.row.message}}</div>
                    <span  class="msg_span">{{scope.row.message}}</span>
                </el-tooltip> -->
                <span @click="showDetails(scope.row.message)" class="msg_span" style="word-wrap:break-word">{{scope.row.message}}</span>
          </template>
        </el-table-column>
         <el-table-column align="center" label="操作时间" min-width="155px" >
            <template slot-scope="scope">
                <span >{{ scope.row.insertDt }}</span>
            </template>
        </el-table-column>
        <el-table-column align="center" label="操作用户" min-width="150px" >
            <template slot-scope="scope">
                <span >{{ scope.row.loginId }}</span>
            </template>
        </el-table-column>
       
    </el-table>
     <el-col :span="24" class="pagination-warp" v-if="tableDataErrorLog.length>0">
        <div class="text-center">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="listQuery.currentPage"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="listQuery.size"
              layout="total, sizes, prev, pager, next ,jumper"
              :total="total">
          </el-pagination>
        </div>
      </el-col>
   </template>
    <template>
     <el-dialog  :title="textMap[dialogStatus]"    :visible.sync="dialogFormVisible">
           <el-scrollbar>
               <span class="aa" v-html="detailMsg" style="word-wrap:break-word;color:red">{{detailMsg}}</span>
           </el-scrollbar>
         
      </el-dialog>
   </template>
</div>
</template>
<script>
import { getList } from "@/api/sys/errorlog";
export default {
  data() {
    return {
      tableDataErrorLog: [],
      total: null,
      detailMsg: "",
      listQuery: {
        currentPage: 1,
        size: 10,
        code: undefined,
        message: undefined,
        url: undefined
      },
      dialogStatus: "",
      dialogFormVisible: false,
      textMap: {
        message: "错误详情"
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      const params = this.listQuery;
      getList(params).then(response => {
        if (response.code === 0) {
          this.tableDataErrorLog = response.data.records;
          this.total = response.data.total;
        }
      });
    },
    handleSearch() {
      this.listQuery.currentPage = 1;
      this.getList();
    },
    handleSizeChange(val) {
      this.listQuery.currentPage = 1;
      this.listQuery.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listQuery.currentPage = val;
      this.getList();
    },
    showDetails(data) {
      this.dialogStatus = "message";
      this.dialogFormVisible = true;
      this.detailMsg = data;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss">

.msg_span {
  display: block;
  white-space: nowrap;
  cursor: pointer;
  width: 180px;
  text-overflow: ellipsis;
  margin: 0px 2px;
}
.el-tooltip__popper {
  width: 1200px !important;
  font-size: 14px !important;
}
</style>